<template>
  <Card title="合计字段" :bordered="false" :head-style="headStyle">
    <template #extra>
      <a-button type="primary" @click="handleCreate" :loading="loading">添加字段</a-button>
      <a-button type="primary" @click="handleOk" class="ml-2" :loading="loading">保存</a-button>
    </template>
    <div class="w-full flex flex-wrap gap-2">
      <div v-for="(item, index) in dataRef" :key="index" class="flex gap-2 items-center">
        <Select
          :options="filedList"
          v-model:value="item.calcFieldCode"
          style="width: 150px"
          showSearch
          optionFilterProp="label"
        />
        <Select :options="calcFuncList" v-model:value="item.calcFunc" style="width: 100px" />
        <span class="cursor-pointer" @click="handleDelete(index)">x</span>
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { Card, Select } from 'ant-design-vue';
  import { isArray, isObject } from '/@/utils/is';
  import { getFormGetFieldsByNumeric } from '/@/api/formDesign/formDesign';
  import { getVisualGetPropStat, getVisualUpdatePropStat } from '/@/api/module/module';
  const props = defineProps({
    moduleCode: {
      type: String,
      default: '',
    },
    formCode: {
      type: String,
      default: '',
    },
    headStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const dataRef = ref<Recordable[]>([]);
  const filedList = ref<Recordable[]>([]);
  const loading = ref(false);

  const calcFuncList = [
    {
      value: '0',
      label: '求和',
    },
    {
      value: '1',
      label: '求平均值',
    },
  ];

  const handleCreate = () => {
    dataRef.value.push({
      calcFieldCode: '',
      calcFunc: '0',
    });
  };

  const getVisualGetPropStatData = async () => {
    dataRef.value = [];
    const res = await getVisualGetPropStat({ moduleCode: props.moduleCode });
    const { propStat } = res;
    if (isObject(propStat)) {
      for (let v in propStat) {
        dataRef.value.push({
          calcFieldCode: v,
          calcFunc: propStat[v],
        });
      }
    }
  };
  const fetch = async () => {
    await nextTick();
    getVisualGetPropStatData();
    if (!props?.formCode) return;
    const data = await getFormGetFieldsByNumeric({ formCode: props.formCode });
    filedList.value = data;
    if (isArray(filedList.value)) {
      filedList.value.forEach((item) => {
        delete item.options;
        item.label = item.title;
        item.value = item.name;
      });
    } else {
      filedList.value = [];
    }
    filedList.value.unshift({
      value: '',
      label: '无',
    });
  };
  onMounted(fetch);

  const handleDelete = (index) => {
    dataRef.value.splice(index, 1);
  };

  const handleOk = async () => {
    try {
      let propStat = {};
      dataRef.value.forEach((item) => {
        propStat[item.calcFieldCode] = item.calcFunc;
      });
      const params = {
        code: props.moduleCode,
        propStat: JSON.stringify(propStat),
      };
      loading.value = true;
      await getVisualUpdatePropStat(params);
      await getVisualGetPropStatData();
    } catch (error) {
      console.error(error);
    } finally {
      loading.value = false;
    }
  };
</script>
